<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li class="active">1</li>
      <li class="active">2</li>
      <li class="active">3</li>
      <span>4</span>
    </ul>

    <button>按钮</button>
    <script>
      // 事件委托 ：1.性能比较好  2.不会受到动态元素的影响
      // 把子元素的事件委托给父元素执行 ；

      // 非事件委托的办法
      // var liEles = document.querySelectorAll("li");
      // liEles.forEach(function(li){
      //     li.onclick = function(){
      //         console.log(1111);
      //     }
      // })

      // 事件委托的方式 :把li的事件 委托给父级ul上；
      // 一、性能好：1.事件只绑定一次 2.没有循环操作
      // var ulEle = document.querySelector("ul");
      // ulEle.onclick = function(e){
      //     // console.log("点击了");
      //     var e = e || window.event;
      //     var target = e.target || e.srcElement;
      //     // console.log(target.nodeName);
      //     // if(target.nodeName=="LI"){
      //     //     console.log("点击了li元素");
      //     // }

      //     if(target.className=="active"){
      //         console.log("点击了li元素");
      //     }
      // }

      // 二、不会受到动态元素的影响
      var lis = document.querySelectorAll("li");
      var ulELe = document.querySelector("ul");
      var btnEle = document.querySelector("button");

      // 普通的写法
      // lis.forEach(function(li){
      //     li.onclick = function(){
      //         console.log("点击了li");
      //     }
      // })

      // 事件委托的写法；事件绑定和子元素的li没有关系，只 和 父级的ul事件有关系；
      ulELe.onclick = function (e) {
        var target = e.target || e.srcElement;
        if (target.nodeName == "LI") {
          console.log("点击了");
        }
      };

      btnEle.onclick = function () {
        var liEle = document.createElement("li");
        liEle.innerHTML = "123";

        ulELe.appendChild(liEle);
      };

      // 总结：事件委托：把子元素事件委托给父元素
      // 1.性能好 2.动态元素不会受到影响
      // 使用条件 ： 子元素比较多 嵌套层级不是特别复杂；
    </script>
  </body>
</html>
